        *{
            margin: 0;  /*外边距*/ /**/
            padding: 0; /*内边距*/
            box-sizing: border-box;
            /*box-sizing: border-box 是 CSS 中控制元素尺寸计算方式的一个关键属性
            它改变了浏览器默认的盒模型行为，
            让元素的宽度（width）和高度（height）包含内边距（padding）和边框（border），
            而不是仅计算内容区域。*/

        }

        body{
            background: linear-gradient(135deg,#ffafbd 30%,#ffc3a0 70%);
            min-height: 100vh;/*设置元素的最小高度，当内容高度不足时会保持这个高度，当内容超出时会自动扩展*/
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .game-header{
            color: #e9e3e4;
            clear: #0fa383;
            text-shadow: 2px 2px 2px rgba(80, 49, 165, 0.5) ;
            margin: 20px 0;
            font-size:2.5em ;
        }
        .info-panel{
            color: #fff;
            width: #fff;
            margin: 10px 0;
            font-size: 1.2em;
        }

        .circle-button{
            width: 50px;
            height: 50px;
            background: linear-gradient(136deg,#e9e3e4 30%,#ffc3a0 70%);
            color: aqua;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1vw;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0, .3);
            position: relative;
            top: -700px;
            right: -200px;
            transition: transform 0.3 ease-in-out;
        }
        
        .play-area{
            width: 500px;
            height: 500px;
            background: rgba(255,255,255, .1);
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0,0,0,.2); /*box-shadow: [水平偏移] [垂直偏移] [模糊半径] [阴影颜色];*/
            overflow: hidden;  /* 超出这个区域的内容不可见 */
            
        }
        .grid-cell{
            width: 25px;
            height: 25px;
            float: left;
            /*使元素向左浮动，脱离正常文档流
            后续内容会环绕在浮动元素周围
            常用于实现文字环绕图片或多栏布局 */
            position:relative;
            /*建立相对定位上下文
            不脱离文档流（元素仍占据原有空间）
            可以使用 top/right/bottom/left 进行微调*/
            border: 1px solid #eee;
        }

        .selection-bar{
            width: 433px;
            height: 70px;
            background: rgba(255,255,255, .2);
            border-radius: 10px;
            margin: 30px 0;
            padding: 10px;
            display: flex;
            gap: 10px; /*用于设置网格(Grid)和弹性盒(Flexbox)布局中行与列之间的间距。*/
            backdrop-filter: blur(5px);
            border: 2px dashed rgba(255,255,255, .5)
            
        }

        .slot{
            width: 50px;
            height: 50px;
            background: #ffafbd;
            border-radius: 8px;
            position: relative;
            box-sizing: 0 3px 6px rgba(0,0,0, .2);
        }

        .rotate{
            animation: spin 3s linear infinite;
        }

        @keyframes spin{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        .progress-container {
            width: 300px;
            height: 5px;
            background: #ddd;
            margin-top: 10px;
            position: relative;
            border-radius: 5px;
            cursor: pointer;
        }

        .progress-bar {
            height: 100%;
            background: #4a90e2;
            border-radius: 5px;
            width: 0%;
        }

        input[type="range"] {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }